import React, { ReactNode } from 'react'
import { Avatar, Button, Divider, Form, Tooltip } from 'antd'
import moment from 'moment'
import BraftEditor from 'braft-editor'
import mockContent from 'src/static/demo_text/demo_content.json'
import avatar from 'src/static/image/race_default.png'
import style from './style.module.scss'
import './style.scss'
import { Link, RouteComponentProps } from 'react-router-dom'

interface RaceDetailPageInfoProps extends RouteComponentProps{
}

interface RaceDetailPageInfoState {
    status: 'signed' | 'sign' | 'race' | 'end';
    content: string;
    loaded: boolean;
}

interface RaceDetailInfoProps{
    id: string;
    poster: {
        avatar: string;
        name: string;
        description: string;
    };
    type: string;
    pay: string;
    level: string;
    host: string;
    sign: {
        start: string;
        end: string;
    };
    compete: {
        start: string;
        end: string;
    };
    status: 'signed' | 'sign' | 'race' | 'end';
}

interface RaceDetailInfoState {

}

const infoLayout = {
    labelCol: {
        xs: { span: 16 },
        sm: { span: 2 }
    },
    wrapperCol: {
        xs: { span: 16 },
        sm: { span: 16 }
    }
}

class RaceDetailInfo extends React.Component<RaceDetailInfoProps, RaceDetailInfoState> {
    getEndStatus = (endTime: string): string => {
        if (moment(endTime).isBefore(new Date())) {
            return '已截止'
        } else {
            return `剩余${(moment(endTime).fromNow().match(/\d+/) as string[])[0]}天`
        }
    }

    getSignButton = (): ReactNode => {
        switch (this.props.status) {
        case 'sign':
            return (
                <Link to={`/sign/${this.props.id}/create`}>
                    <Button type={'primary'}>立即报名</Button>
                </Link>
            )
        case 'signed':
            return <Button className={style.signedBtn}>已报名</Button>
        case 'race':
            return <Button>报名截止</Button>
        default:
            return <Button type={'danger'}>已结束</Button>
        }
    }

    render (): ReactNode {
        const data = this.props
        console.log(style.detailInfoBox)
        return (
            <div className={'detailInfoBox'}>
                <div className={style.posterBox}>
                    <Link to={'#'}>
                        <Avatar src={data.poster.avatar} alt={data.poster.name} size={52} style={{ minWidth: '52px' }}/>
                        <div className={style.avatarInfo}>
                            <h3>{data.poster.name}</h3>
                            <p>{data.poster.description}</p>
                        </div>
                    </Link>
                    <div className={style.signBtnBox}>
                        {this.getSignButton()}
                    </div>
                </div>
                <Divider/>
                <Form {...infoLayout}>
                    <Form.Item label={'主办方'}>
                        {data.host}
                    </Form.Item>
                    <Form.Item label={'赛级'}>
                        {data.level}
                    </Form.Item>
                    <Form.Item label={'竞赛类别'}>
                        {data.type}
                    </Form.Item>
                    <Form.Item label={'报名时间'}>
                        <Tooltip title={
                            this.getEndStatus(data.sign.end)
                        }>
                            {data.sign.start} - {data.sign.end}
                        </Tooltip>
                    </Form.Item>
                    <Form.Item label={'比赛时间'}>
                        <Tooltip title={
                            this.getEndStatus(data.compete.end)
                        }>
                            {data.compete.start} - {data.compete.end}
                        </Tooltip>
                    </Form.Item>
                </Form>
            </div>
        )
    }
}

const mockInfo: RaceDetailInfoProps = {
    id: '111',
    poster: {
        avatar: avatar,
        name: 'MathorCup组委会',
        description: 'MathorCup高校数学建模挑战赛组官方'
    },
    type: '数学建模',
    pay: '200',
    level: '国家级',
    host: '中国优选法统筹法与经济数学研究会',
    sign: {
        start: '2020-1-1',
        end: '2020-1-10'
    },
    compete: {
        start: '2020-3-1',
        end: '2020-3-8'
    },
    status: 'sign'
}

export class RaceDetailPageInfo extends React.Component<RaceDetailPageInfoProps, RaceDetailPageInfoState> {
    constructor (props: RaceDetailPageInfoProps) {
        super(props)
        this.state = {
            status: 'sign',
            content: 'Hello',
            loaded: false
        }
    }

    contentSession = React.createRef<HTMLElement>()

    componentDidMount (): void {
        this.loadDemoData().then(this.renderEditorPreview)
    }

    loadDemoData (): Promise<void> {
        return new Promise<void>(resolve => {
            this.setState(() => {
                return {
                    content: JSON.stringify(mockContent)
                }
            })
            resolve()
        })
    }

    renderEditorPreview = (): void => {
        // TODO: 注意这里存在 XSS 攻击，一定要在服务器做好验证
        const current: HTMLElement | null = this.contentSession.current
        if (current instanceof HTMLElement) {
            // 设置一个延迟，等待动画过渡完成后挂载 DOM
            setTimeout(() => {
                current.innerHTML = BraftEditor.createEditorState(this.state.content).toHTML()
                this.setState(() => ({
                    loaded: true
                }))
            }, 500)
        }
    }

    render (): ReactNode {
        const contentClassName = this.state.loaded ? 'braft-content braft-content-show' : 'braft-content'
        return (
            <div>
                <section key={'1'}>
                    <RaceDetailInfo {...mockInfo}/>
                    <Divider/>
                </section>
                <section ref={this.contentSession} className={contentClassName}/>
            </div>
        )
    }
}

export default RaceDetailPageInfo
